<template>
	<view>
		<view class="push" @click.stop>
			<view class="push-title">发布您想说的</view>
			<view class="tab-title u-flex">
				<view :class="{active:tab === 2}" @click="tab = 2">专家问题</view>
				<view :class="{active:tab === 1}" @click="tab = 1">普通问题</view>
			</view>
			<view class="tab-cate u-flex">
				<view class="item" :class="{active:cate === 1}" @click="cate = 1">
					<text class="iconfont icon-fabu"></text>
					<view class="tit">情感维护</view>
					<view class="en">QINGGANWEIHU</view>
				</view>
				<view class="item" :class="{active:cate === 2}" @click="cate = 2">
					<text class="iconfont icon-fabu"></text>
					<view class="tit">情感表达</view>
					<view class="en">QINGGANBIAODA</view>
				</view>
				<view class="item" :class="{active:cate === 3}" @click="cate = 3">
					<text class="iconfont icon-fabu"></text>
					<view class="tit">情感挽回</view>
					<view class="en">QINGGANWANHUI</view>
				</view>
			</view>
			<view class="ds-price">
				<view class="title">打赏金额</view>
				<scroll-view scroll-y="true" style="height: 240rpx;">
					<view class="list u-flex u-flex-wrap">
						<view class="item " v-for="(item,index) in rechargeList" :key="item.id" :class="{active:index == dsIndex}" @click="dsIndex = index">
							<text class="num1">{{item.icoin}}</text><text class="num2">i币</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="btn-wrap u-flex">
				<view @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"push-topics",
		data() {
			return {
				tab:2,
				cate:2,//分类：1情感维护，2情感表达，3情感挽回,
				dsIndex: 0,
				rechargeList:[]
			};
		},
		created() {
			this.getList()
		},
		methods:{
			getList(){
				this.$u.api.publishList().then(res=>{
					this.rechargeList = res
				})
			},
			submit(){
				let index = this.dsIndex
				if(index === -1){
					this.$u.toast('请选择打赏金额')
					return
				}
				let publish_id = this.rechargeList[index].id
				let data = {
					cate:this.cate,
					tab:this.tab,
					publish_id
				}
				this.$app.jump(`/pages/topics/publish?data=${encodeURIComponent(JSON.stringify(data))}`)
				this.$emit('publish')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.push{
		width: 640rpx;border-radius: 20rpx;transform: translate(-50%,-50%);left: 50%;top: 50%;
		background: url(#{$imgUrl}/bg.png) repeat;position: fixed;
		.push-title{position: absolute;top: -40rpx;left: 50%;transform: translateX(-50%);border-radius: 60rpx 0 60rpx 0;background-color: #fff;font-size: 32rpx;font-weight: bold;
			padding: 20rpx 60rpx;white-space: nowrap;box-shadow: 0 0 8rpx rgba($color: #000000, $alpha: 0.08);
		}
		.tab-title{
			justify-content: space-evenly;padding-top: 70rpx;
			view{border-radius: 100rpx;width: 200rpx;border: 2rpx solid #333;font-size: 32rpx;font-weight: bold;text-align: center;line-height: 68rpx;}
			.active{background-color: $tc;color: #fff;border-color: $tc;}
		}
		.tab-cate{
			justify-content: space-around;padding-top: 30rpx;height: 270rpx;
			.item{border-radius: 10rpx;border: 2rpx solid #333;width: 140rpx;height: 120rpx;transition: all .1s;
				.iconfont{display: none;}
				.tit{font-size: 28rpx;text-align: center;font-weight: bold;padding-top: 30rpx;}
				.en{font-size: 14rpx;text-align: center;}
				&.active{
					text-align: center;background-color: $tc;border-color: $tc;width: 260rpx;height: 200rpx;color: #fff;padding-top: 15rpx;
					.iconfont{display: inline;font-size: 70rpx;color: #fff;}
					.tit{padding-top: 0rpx;font-size: 38rpx;}
					.en{font-size: 18rpx;padding-top: 8rpx;}
				}
			}
		}
		// 打赏金额
		.ds-price{
			padding: 0 30rpx;
			.title{color: #F55332;padding-bottom: 20rpx;}
			.item{width: 31.33%;margin: 0 1%;text-align: center;line-height: 100rpx;border-radius: 10rpx;border: 2rpx solid transparent;height: 100rpx;
				transition: all .2s;
				.num1{font-size: 34rpx;}
				.num2{padding-left: 20rpx;font-weight: bold;}
				&.active{
					border-color: $tc;background-color: rgba($color: $tc, $alpha: 0.05);
					.num1{font-size: 40rpx;color: #F55332;}
					.num2{color: $tc;}
				}
			}
		}
		
		.btn-wrap{justify-content: center;padding: 20rpx 0 60rpx;
			view{background-color: $tc;color: #fff;font-size: 32rpx;font-weight: bold;width: 440rpx;line-height: 66rpx;text-align: center;border-radius: 100rpx;}
		}
	}
</style>
